<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		#box{
			width: 600px;
			height: 200px;
			margin: 50px auto;
			background: black;
			overflow: hidden;
		}

        #oul{
        	width: 6000px;
        	position: relative;
        }

		ul li{
			width: 300px;
			height: 200px;
			float: left;
		}

		ul li:nth-of-type(1),ul li:nth-of-type(5){
			background: red;
			/* opacity: 0; */
		}
		
		ul li:nth-of-type(2),ul li:nth-of-type(6){
			background: orange;
		}

		ul li:nth-of-type(3){
			background: blue;
		}

		ul li:nth-of-type(4){
			background: yellow;
		}

	</style>
</head>
<body>
	<div id="box">
		<ul id="oul">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			
			<li>1</li>
			<li>2</li>
		</ul>
	</div>

	<script>
		var num=0;
		var timer;
		function go(){
		timer=setInterval(function(){
			num++;
			if(num==1200) num=0;
			oul.style.left=-num+'px';
		},60)}

        go();

		var oli=oul.children;
		for(var i=0;i<oli.length;i++){
			oli[i].onmouseenter=function(){
				clearInterval(timer);
				for(var j=0;j<oli.length;j++){
					oli[j].style.opacity=0.4;
				}
				this.style.opacity=1;
			}

			oli[i].onmouseleave=function(){
				go();
				for(var j=0;j<oli.length;j++){
					oli[j].style.opacity=1;
				}
			}
		}
	</script>
</body>
</html>